<template>
  <el-row>
    <el-col :span="3">
      <el-input v-model="name" placeholder="档案号/姓名"> </el-input>
    </el-col>
    <el-col :span="6" :push="1">
      <el-button type="primary" @click="listAxios">搜索</el-button>
    </el-col>
    <el-col :span="24">
      <el-button type="primary" @click="addsuggestbtn">新增</el-button>
    </el-col>

    <el-col :span="24">
      <el-table :data="suggestTable" stripe style="width: 100%"   :header-cell-style="{ background: 'rgb(39,49,70)', color: '#ffffff' }">

        <el-table-column prop="name" label="评估名称" width="200">
        </el-table-column>
        <el-table-column prop="result" label="评估结果" width="200">
        </el-table-column>
        <el-table-column prop="suggestion" label="建议">
        </el-table-column>
        <el-table-column prop="created" label="创建时间" width="200">
          <template slot-scope="scope">
            <div>
              {{ scope.row.created | timeWith }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态" width="200">
          <template slot-scope="scope">
            <div>
              {{ scope.row.ban | stateQuery }}
            </div>

          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="250">
          <template slot-scope="scope">
            <el-button size="mini" plain @click="events(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" plain @click="deleteSuggest(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="10" :push="14">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 50, 100]" :page-size="5" layout="total, sizes, prev, pager, next, jumper"
        :total="Number(count)">
      </el-pagination>
    </el-col>

    <el-col>
      <el-dialog :title="modelName" :visible.sync="dialogFormAdd" width="500px" height="600px">
        <el-form :model="form" >
          <el-form-item label="评估名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" :disabled="form.id != '' ? true : false"></el-input>
          </el-form-item>
          <el-form-item label="评估结果" :label-width="formLabelWidth">
            <el-input v-model="form.result" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="组合" :label-width="formLabelWidth">
            <el-input v-model="form.combination" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="建议" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="form.suggestion" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="form.remarks" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="建议状态" :label-width="formLabelWidth">
            <el-radio v-model="form.ban" :label="1">启用</el-radio>
            <el-radio v-model="form.ban" :label="0">禁用</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormAdd = false">取 消</el-button>
          <el-button type="primary" @click="addAdmin()">确 定</el-button>
        </div>
      </el-dialog>
    </el-col>
  </el-row>

</template>

<script>
export default {
  data() {
    return {
      page: 1,
      limit: 5,
      name: '',
      suggestTable: [],
      count: '',
      form: {
        id: '',
        name: 'feipang',
        result: 'asdasdw',
        state: '1',
        suggestion: 'f射入他',
        combination: '撒旦法人',
        remarks: '阿司法部',
        created: "2022-07-21T02:23:17.587Z",
        ban: 0,
        updated: "2022-07-21T02:23:17.587Z",
        deleted: 0,
      },
      dialogTableVisible: false,
      dialogFormAdd: false,
      formLabelWidth: '120px',
      modelName: '新增'
    }
  },
  created() {
    this.listAxios()
  },
  methods: {
    handleSizeChange(val) {
      this.limit = Number(val)
      this.listAxios()
    },
    handleCurrentChange(val) {
      this.page = Number(val)
      this.listAxios()
    },
    // 查询axios调用
    listAxios() {
      this.$axios({
        method: 'GET',
        url: '/evaluation/list',
        params: { 'page': this.page, 'limit': this.limit, 'name': this.name }
      }).then(res => {
        // //console.log(res)
        this.suggestTable = res.data
        this.count = res.count
      })
    },
    // 
    addsuggestbtn() {
      this.form = {
        id: '',
        name: '',
        result: '',
        state: '1',
        suggestion: '',
        combination: '',
        remarks: '',
        created: "2022-07-21T02:23:17.587Z",
        ban: 0,
        updated: "2022-07-21T02:23:17.587Z",
        deleted: 0,
      }
      this.dialogFormAdd = true
    },
    events(e) {
      this.modelName = '修改'
      this.dialogFormAdd = true
      this.form = { ...e }
    },
    addAdmin(e) {
      this.modelName = e
      if (this.form.id == '') {
        this.$axios({
          method: 'POST',
          url: '/evaluation/add',
          data: this.form
        }).then(res => {
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: '添加成功!'
            });
            this.listAxios()
          }

        })
      } else {
        this.$axios({
          method: 'POST',
          url: '/evaluation/update',
          data: this.form
        }).then(res => {
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            this.listAxios()
          }

        })
      }

      this.dialogFormAdd = false
    },
    deleteSuggest(e) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          method: 'GET',
          url: '/evaluation/delete',
          params: { id: e.id }
        }).then(res => {
          if (res.code === 0) {
            this.listAxios()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }
        })
      })
    }
  },
  // 过滤器
  filters: {
    stateQuery: function (value) {
      return value == 1 ? '启用' : '禁用'
    },
  }
}
</script>

<style scoped>
.el-col {
  margin-bottom: 20px;
}
</style>